<template>
  <el-container>
    <div class="c2">
      <el-row :gutter="20">
        <el-col :xs="9" :sm="6" :md="4" :lg="4" :xl="4">
          <div class="head-container">
            <el-input
              v-model="deptName2"
              clearable
              placeholder="输入部门名称搜索"
              prefix-icon="el-icon-search"
              style="width: 100%"
              class="filter-item"
              @input="deptsTree"
            />
          </div>
          <el-tree
            class="depttree"
            :data="depts"
            :props="defaultProps"
            :expand-on-click-node="false"
          
            @node-click="handleNodeClick"
          />
        </el-col>
        <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20">
          <div class="c1">
            <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="adduser"
              >新增</el-button
            >
            <el-button
              :loading="downloadLoading"
              size="mini"
              class="dBtn"
              type="warning"
              icon="el-icon-download"
              @click="download"
              >导出</el-button
            >
            <el-form
              :inline="true"
              :model="searchData"
              class="demo-form-inline s1"
            >
              <el-form-item>
                <el-input
                  class="search_inp"
                  v-model="searchData.userName"
                  placeholder="输入'用户名'查询"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  size="mini"
                  type="success"
                  icon="el-icon-search"
                  @click="searchBtn(searchData)"
                  >查询</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                  size="mini"
                  type="warning"
                  icon="el-icon-refresh-left"
                  @click="searchrestBtn(searchData)"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <el-table
            :data="tableData"
            style="width: 100%"
            max-height="400"
            align="center"
            stripe
            v-loading="loading"
          >
            <el-table-column type="index" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="80" align="center">
            </el-table-column>
            <el-table-column prop="userName" label="用户名" align="center">
            </el-table-column>

            <el-table-column prop="loginName" label="登录账号">
            </el-table-column>
            <!-- <el-table-column prop="password" label="登录密码"> </el-table-column> -->
            <el-table-column prop="phone" label="手机号"> </el-table-column>
            <el-table-column prop="email" width="160" label="邮箱">
            </el-table-column>
            <el-table-column  label="详情">
                 <template v-slot="prop">
                      <el-button size="mini" type="success" icon="el-icon-check" circle @click="userDetail(prop.row.id)"></el-button>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="deptList"  label="部门">
               <template v-slot="prop">
                  <div v-for="item in prop.row.deptList " :key="item.id">{{item.id}}</div>
              </template>
            </el-table-column> -->
            <el-table-column prop="status" width="180" label="状态">
              <template v-slot="prop">
                <el-switch
                  @change="changeSwitch(prop.row.status, prop.row.id)"
                  v-model="prop.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="启用"
                  inactive-text="禁用"
                >
                </el-switch>
              </template>
            </el-table-column>

            <!-- <el-table-column prop="icon" label="菜单图标">
        <template v-slot="prop">
          <i :class="prop.row.icon"></i>
        </template>
      </el-table-column> -->
            <!-- <el-table-column prop="type" label="菜单类型">
        <template v-slot="prop">
          <el-tag size="small" type="success" v-if="prop.row.type === 1">目录</el-tag>
          <el-tag size="small" type="success" v-else-if="prop.row.type === 2">菜单</el-tag>
          <el-tag size="small" type="warning" v-else>按钮</el-tag>
        </template>
      </el-table-column> -->
            <!-- <el-table-column prop="path" label="路由地址"> </el-table-column>
        <el-table-column prop="status" label="启用状态">
          <template v-slot="prop">
            <el-button
              type="success"
              v-if="prop.row.status === 1"
              size="mini"
              round
              plain
              >已启用</el-button
            >
            <el-button type="danger" v-else plain size="mini" round
              >已禁用</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="authStr" label="权限字符"> </el-table-column>
        <el-table-column prop="isHide" label="可见">
          <template v-slot="prop">
            <el-tag size="small" type="info" v-if="prop.row.isHide == false"
              >是</el-tag
            >

            <el-tag size="small" type="warning" v-else>否</el-tag>
          </template>
        </el-table-column> -->

            <el-table-column width="180" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="handleDelete(scope.row.id)"
                ></el-button>
                <!-- <el-button
            size="mini"
            type="info"
            icon="el-icon-refresh-left"
            @click="restPassword(scope.row.id)"
            ></el-button
          > -->
              </template>
            </el-table-column>
          </el-table>
          <div class="pageCon">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.pageNum.currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="this.pageNum.perPage_size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageNum.total"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 新增菜单对话框 start -->

    <el-dialog
      title="新增用户"
      :visible.sync="adduserDialogVisible"
      width="50%"
      class="adddialog"
    >
      <el-form
        class="editform"
        ref="ruleForm"
        :rules="rules"
        label-position="left"
        label-width="80px"
        :model="addData"
      >
        <!-- <el-form-item label="菜单类型">
          <template>
            <el-radio v-model="addData.type" :label="1">目录</el-radio>
            <el-radio v-model="addData.type" :label="2">菜单</el-radio>
            <el-radio v-model="addData.type" :label="3">按钮</el-radio>
          </template>
        </el-form-item> -->
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addData.userName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="loginName">
          <el-input v-model="addData.loginName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="addData.password" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addData.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addData.email" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="deptList">
          <!-- <Treeselect
            v-model="deptList"
            :options="depts"
            style="width: 178px"
            placeholder="选择部门"
            @select="selectFun"
          /> -->
          <el-select v-model="addData.deptList" multiple placeholder="请选择">
            <el-option
              v-for="item in depts"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleList">
          <!-- <Treeselect
            v-model="deptList"
            :options="depts"
            style="width: 178px"
            placeholder="选择部门"
            @select="selectFun"
          /> -->
          <el-select v-model="addData.roleList" multiple placeholder="请选择">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="addData.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="warning" @click="addNo">取 消</el-button>
        <el-button size="mini" type="primary" @click="adduserDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增菜单对话框 end -->

    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="deluserDialogVisible" width="30%">
      确认删除吗?
      <span slot="footer" class="dialog-footer">
        <el-button @click="deluserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deluserDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="用户修改"
      :visible.sync="edituserDialogVisible"
      width="50%"
    >
      <el-form
        class="editform"
        ref="ruleForm2"
        :rules="rules"
        label-position="left"
        label-width="80px"
        :model="usersForm"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="usersForm.userName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="登录账号" prop="loginName">
          <el-input
            v-model="usersForm.loginName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input
            v-model="usersForm.password"
            placeholder="请输入"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="usersForm.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="usersForm.email" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="角色" prop="roleIds">
          <el-select multiple v-model="editDate1.roleIds" placeholder="请选择">
            <el-option
              v-for="item in tableData1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="edituserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edituserDialog">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from "../../utils/axios";
import md5 from "js-md5";
import { getDepts, roleList,getDeptsList } from "../../utils/api";

// import Treeselect from "@riophae/vue-treeselect";

// import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  //  components: { Treeselect },
  methods: {
    //部门树
    deptsTree() {
      let parms ={}
      parms.deptName= this.deptName2;
      parms.isAll=true;
      getDepts(parms).then((res) => {
        if (res.code == 200) {
          this.depts = res.data;
        }
      });
    },
    //部门查询
      deptsTree2() {
      let parms ={}
      parms.name= this.deptName2;
      parms.size=-1
     
      getDeptsList(parms).then((res) => {
        if (res.code == 200) {
          this.depts = res.data;
        }
      });
    },
    //部门树点击
    handleNodeClick() {
      console.log(1);
    },
    //用户列表
    getUserList(con) {
      axios({
        method: "GET",
        url: "/sys/user",
        params: con,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          // this.parentList = res.data.filter((item) => item.pid == 0);
          this.loading = false;
          this.pageNum.current = res.data.current;
          this.pageNum.size = res.data.size;
          this.pageNum.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //用户状态
    changeSwitch(con1, con2) {
      let data = {};
      data.id = con2;
      data.status = con1;
      if (con1 == 1) {
        let data = {};
        data.id = con2;
        data.status = con1;

        this.$confirm("此操作将启用该角色", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            axios({
              method: "PUT",
              url: "/sys/user",
              data: data,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("启用成功");
                this.edituserDialogVisible = false;
                this.getUserList(this.pageNum);
              } else {
                this.getUserList(this.pageNum);
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {
            this.getUserList(this.pageNum);
          });
      }
        if (con1 == 0) {
        let data = {};
        data.id = con2;
        data.status = con1;

        this.$confirm("此操作将禁用该角色", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            axios({
              method: "PUT",
              url: "/sys/user",
              data: data,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("禁用成功");
                this.edituserDialogVisible = false;
                this.getUserList(this.pageNum);
              } else {
                this.getUserList(this.pageNum);
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {
            this.getUserList(this.pageNum);
          });
      }
    },
    //页码
    handleSizeChange(val) {
      this.pageNum.size = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getUserList(this.searchData);
      } else {
        this.getUserList();
      }
    },
    handleCurrentChange(val) {
      this.pageNum.current = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getUserList(this.searchData);
      } else {
        this.getUserList();
      }
    },
    //添加
    adduser() {
      this.adduserDialogVisible = true;
         roleList({ size: -1 }).then((res) => {
           console.log(res);
      this.roles = res.data.records;
    });
      this.searchrestBtn();
    },
    addNo() {
      this.adduserDialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },
    adduserDialog() {
      this.addData.password = md5(this.addData.password);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          axios({
            method: "POST",
            url: "/sys/user",
            data: this.addData,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.adduserDialogVisible = false;
              this.getUserList(this.pageNum);
              this.$refs.ruleForm.resetFields();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("内容不完整");
        }
      });
    },
 
    //查询
    searchBtn(con) {
      this.getUserList(con);
      this.searchToggle = true;
    },
    //导出
    download() {
      this.downloadLoading = true;
    },
    //重置
    searchrestBtn() {
      this.searchData.userName = "";
      this.getUserList();
      this.searchToggle = false;
    },
    //删除
    handleDelete(con) {
      this.deluserDialogVisible = true;

      this.delDate = [];
      this.delDate.push(con);
    },
    deluserDialog() {
      axios({
        method: "delete",
        url: "/sys/user",

        data: JSON.stringify(this.delDate),
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.deluserDialogVisible = false;
          this.getUserList(this.pageNum);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    deluserhandleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //角色查询
    getRoleList() {
      axios({
        method: "GET",
        url: "/sys/role",
        params: { size: -1 },
      }).then((res) => {
        if (res.code == 200) {
          this.tableData1 = res.data.records;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //修改
    handleEdit(con) {
      this.edituserDialogVisible = true;
      this.usersForm.userName = con.userName;
      this.usersForm.loginName = con.loginName;
      this.usersForm.password = con.password;
      this.usersForm.phone = con.phone;
      this.usersForm.email = con.email;
      this.usersForm.id = con.id;
      this.editDate1.userId = con.id;
    },
    edituserDialog() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          axios({
            method: "PUT",
            url: "/sys/user",
            data: this.usersForm,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.edituserDialogVisible = false;
              this.getUserList(this.pageNum);
            } else {
              console.log(res);
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("内容不完整");
        }
      });
    },
    //重置用户角色关联
    restUserRoles() {
      let data = {}
      data.roleIds=this.editDate1.roleIds
      data.userId=this.editDate1.userId
             axios({
            method: "POST",
            url: "/sys/role/reset",
            data: data,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("角色重置成功");
              
            } else {
              this.$message.error(res.message);
            }
          });
    },
    edituserhandleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //重置密码
    restPassword(con) {
      this.$confirm("此操作将重置密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {};
          obj.id = con;
          axios({
            method: "GET",
            url: "/sys/user/restPassword",
            params: obj,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("重置成功");
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  data() {
    return {
      pageNum: {
        current: 1,
        size: 10,
        total: 0,
      },
      icons: "",
      adduserDialogVisible: false,
      deluserDialogVisible: false,
      edituserDialogVisible: false,
      innerVisible: false,
      searchToggle: false,
      loading: true,
      downloadLoading: false,
      delDate: [],

      searchData: {
        userName: "",
      },
      usersForm: {
        email: "",
        loginName: "",
        password: "",
        phone: "",
        photo: "",
        status: 0,
        userName: "",
      },
      tableData: [],
      tableData1: [],
      depts: [],
    
    
      roles: [],
    
      deptName: {},
      deptName2: '',

      defaultProps: {
        children: "children",
        label: "name",
      },

      editDate1: {
        roleIds: [],
        userId: "",
      },
      // parentList: [],
      addData: {
        deptList: [],
        email: "",
        loginName: "",
        password: "",
        phone: "",
        photo: "",
        roleList: [],
        status: 1,
        userName: "",
      },
      rules: {
        loginName: [{ required: true, message: "必填", trigger: "blur" }],
        password: [{ required: true, message: "必填", trigger: "blur" }],
        userName: [{ required: true, message: "必填", trigger: "blur" }],
        phone: [
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "手机号格式错误",
            trigger: ["blur", "change"],
          },
        ],
        // authStr: [{ required: true, message: "必填", trigger: "blur" }],
      },
      rules3: {
        roleIds: [{ required: true, message: "必填", trigger: "blur" }],

        // authStr: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getUserList();
    this.getRoleList();
    this.deptsTree();
 
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
}
.el-card {
  width: 100%;
}
.el-footer {
  align-self: start;
  margin-top: 1.5rem;
}
.c1 {
  display: flex;
  justify-content: start;
  margin-bottom: 1.5rem;
  width: 100%;
  .dBtn {
    margin-right: 1rem;
  }
}
.el-dialog {
  display: flex;
  justify-content: flex-start;
}
.btns {
  display: flex;
  justify-content: space-between;
}
.s1 {
  height: 0;
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
}

.editform {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  text-align: left;
  .el-input /deep/.el-input__inner {
    height: 3.05rem;
    font-size: 12px !important;
  }
}
.el-input /deep/.el-input__inner {
  height: 3.05rem;
  font-size: 12px !important;
}
.editform /deep/ .el-form-item {
  display: inline-block;
  margin-left: 1rem;

  width: 48%;
}
.el-input /deep/ .el-input__icon {
  height: 100%;
  width: 25px;
  text-align: center;
  transition: all 0.3s;
  line-height: 3.05rem;
}
.pageCon {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 1.3rem;
}
.el-table /deep/ {
  font-size: 12px;
}
.el-switch /deep/ .el-switch__label * {
  font-size: 12px;
}
.el-table /deep/ thead {
  font-size: 12.5px;
  color: #909399;
  font-weight: 700;
}
.depttree {
  margin-top: 20px;
  font-size: 14px;
}
.el-dialog /deep/ .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: left !important;
}
</style>